import React from 'react';
import { Card, Table, Button, Space, message, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface AdminType {
  key: string;
  username: string;
  role: string;
  email: string;
  status: 'active' | 'inactive';
  lastLogin: string;
}

const Admin: React.FC = () => {
  const columns: ColumnsType<AdminType> = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '活跃' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '最后登录',
      dataIndex: 'lastLogin',
      key: 'lastLogin',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button 
            type="link" 
            danger 
            onClick={() => handleToggleStatus(record)}
          >
            {record.status === 'active' ? '禁用' : '启用'}
          </Button>
        </Space>
      ),
    },
  ];

  const data: AdminType[] = [
    {
      key: '1',
      username: 'admin',
      role: '超级管理员',
      email: 'admin@example.com',
      status: 'active',
      lastLogin: '2024-03-20 10:00:00',
    },
    {
      key: '2',
      username: 'user1',
      role: '普通用户',
      email: 'user1@example.com',
      status: 'active',
      lastLogin: '2024-03-20 09:00:00',
    },
  ];

  const handleEdit = (record: AdminType) => {
    message.info(`编辑用户: ${record.username}`);
  };

  const handleToggleStatus = (record: AdminType) => {
    message.success(`${record.username} 状态已${record.status === 'active' ? '禁用' : '启用'}`);
  };

  return (
    <Card title="管理人员">
      <Table columns={columns} dataSource={data} />
    </Card>
  );
};

export default Admin; 